<!--
 *  ┌───┐   ┌───┬───┬───┬───┐ ┌───┬───┬───┬───┐ ┌───┬───┬───┬───┐ ┌───┬───┬───┐
 *  │Esc│   │ F1│ F2│ F3│ F4│ │ F5│ F6│ F7│ F8│ │ F9│F10│F11│F12│ │P/S│S L│P/B│  ┌┐    ┌┐    ┌┐
 *  └───┘   └───┴───┴───┴───┘ └───┴───┴───┴───┘ └───┴───┴───┴───┘ └───┴───┴───┘  └┘    └┘    └┘
 *  ┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───────┐ ┌───┬───┬───┐ ┌───┬───┬───┬───┐
 *  │~ `│! 1│@ 2│# 3│$ 4│% 5│^ 6│& 7│* 8│( 9│) 0│_ -│+ =│ BacSp │ │Ins│Hom│PUp│ │N L│ / │ * │ - │
 *  ├───┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─────┤ ├───┼───┼───┤ ├───┼───┼───┼───┤
 *  │ Tab │ Q │ W │ E │ R │ T │ Y │ U │ I │ O │ P │{ [│} ]│ | \ │ │Del│End│PDn│ │ 7 │ 8 │ 9 │   │
 *  ├─────┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴─────┤ └───┴───┴───┘ ├───┼───┼───┤ + │
 *  │ Caps │ A │ S │ D │ F │ G │ H │ J │ K │ L │: ;│" '│ Enter  │               │ 4 │ 5 │ 6 │   │
 *  ├──────┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴────────┤     ┌───┐     ├───┼───┼───┼───┤
 *  │ Shift  │ Z │ X │ C │ V │ B │ N │ M │< ,│> .│? /│  Shift   │     │ ↑ │     │ 1 │ 2 │ 3 │   │
 *  ├─────┬──┴─┬─┴──┬┴───┴───┴───┴───┴───┴──┬┴───┼───┴┬────┬────┤ ┌───┼───┼───┐ ├───┴───┼───┤ E││
 *  │ Ctrl│    │Alt │         Space         │ Alt│    │    │Ctrl│ │ ← │ ↓ │ → │ │   0   │ . │←─┘│
 *  └─────┴────┴────┴───────────────────────┴────┴────┴────┴────┘ └───┴───┴───┘ └───────┴───┴───┘
 *
 * @Descripttion:
 * @version:
 * @Date: 2022-03-02 11:15:59
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-07-24 10:54:57
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
 -->
<template>
  <div class="app-container">
    <pro-table
      ref="pageBox"
      title="我的应用"
      :request="getList"
      :columns="columns"
      :search="searchObj"
      @selectionChange="handleSelectionChange"
    >
      <template #toolbar>
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="handleShowAddEdit"
        >
          创建应用
        </el-button>
        <el-button
          :disabled="selectedArr.length <= 0"
          icon="el-icon-delete"
          @click="handleDelete"
        >
          批量删除
        </el-button>
      </template>
      <template #expand="{ row }">
        <el-card shadow="never">审核意见：{{ row.check_msg }}</el-card>
      </template>
      <template #channel="{ row }">
        <el-tag size="mini" type="success">{{ row.channel }}</el-tag>
      </template>
      <template #status="{ row }">
        <el-tag size="mini" :type="statusType[+row.check]" effect="dark">
          {{ row.check_msg }}
        </el-tag>
      </template>
      <template #date="{ row }">
        {{ row.create_time | parseTime }}
      </template>
      <template #subscribe="{ row }">
        <el-switch :value="!!row.subscribe"></el-switch>
      </template>
      <template #operate="{ row }">
        <el-tooltip content="编辑" placement="top">
          <i
            class="el-icon-edit operate-button"
            @click="handleShowAddEdit(row)"
          ></i>
        </el-tooltip>
        <el-divider direction="vertical" class="button-divider"></el-divider>
        <el-tooltip content="删除" placement="top">
          <i
            class="el-icon-delete operate-button"
            @click="handleDelete([row])"
          ></i>
        </el-tooltip>
        <el-divider direction="vertical" class="button-divider"></el-divider>
        <el-tooltip content="开发者选项" placement="top">
          <svg-icon
            icon-class="developer"
            class="operate-button"
            @click="handleClickDeveloper(row)"
          />
        </el-tooltip>
        <el-divider direction="vertical" class="button-divider"></el-divider>
        <el-tooltip content="微信公众号迁入" placement="top">
          <svg-icon
            icon-class="wechat"
            class="operate-button"
            @click="$router.push('applications/wx-import/' + row.id)"
          />
        </el-tooltip>
        <el-divider direction="vertical" class="button-divider"></el-divider>
        <el-tooltip content="制作推广海报" placement="top">
          <svg-icon
            icon-class="notice"
            class="operate-button"
            @click="$router.push('applications/poster/' + row.app_id)"
          />
        </el-tooltip>
      </template>
    </pro-table>
    <!-- 开发者选项弹窗 -->
    <el-dialog
      v-if="showDeveloper"
      :visible.sync="showDeveloper"
      :close-on-click-modal="false"
      title="开发者选项"
      width="520px"
    >
      <developer :app-info="selectedApp" @close="showDeveloper = false" />
    </el-dialog>
    <!-- 创建/编辑应用 -->
    <el-drawer
      :wrapper-closable="false"
      :show-close="false"
      :with-header="false"
      :visible.sync="showAddEdit"
      direction="rtl"
      size="1200px"
      @closed="isAddEdit = false"
    >
      <add-edit
        v-if="isAddEdit"
        :app-info="selectedApp"
        @close="showAddEdit = false"
      />
    </el-drawer>
  </div>
</template>
<script>
import { GetList, DeleteItem } from '@/api/app'
import Developer from './components/developer'
import AddEdit from './components/addEdit'
export default {
  name: 'MyApplications',
  components: { Developer, AddEdit },
  data() {
    return {
      showDeveloper: false,
      selectedApp: {},
      isAddEdit: false,
      showAddEdit: false,
      selectedArr: [],
      columns: [
        { type: 'expand', tdSlot: 'expand' },
        { type: 'selection' },
        {
          label: '名称',
          prop: 'name',
        },
        {
          label: '通道',
          tdSlot: 'channel',
          align: 'center',
        },
        {
          label: '审核状态',
          tdSlot: 'status',
          align: 'center',
        },
        {
          label: '创建时间',
          tdSlot: 'date',
          align: 'center',
          width: 160,
        },
        {
          label: '使用订阅功能',
          tdSlot: 'subscribe',
          align: 'center',
        },
        {
          label: '操作',
          tdSlot: 'operate',
          width: 240,
          align: 'center',
          fixed: 'right',
        },
      ],
      searchObj: {
        inputWidth: '200px',
        fields: [
          {
            type: 'text',
            label: '应用名称',
            name: 'app_name',
          },
        ],
      },
      statusType: ['danger', 'success', 'warning'],
    }
  },

  methods: {
    async getList(params) {
      const { pageNum: page, pageSize: rows, ...rest } = params
      const { code, data } = await GetList({ page, rows, ...rest })
      // const { code, data } = await new Promise(resolve => {
      //   setTimeout(() => {
      //     resolve({
      //       code: 200,
      //       data: {
      //         list: [
      //           {
      //             id: 1,
      //             name: '飞屋消消消',
      //             channel: '模拟器',
      //             status: 1,
      //             statusText: '新增-通过',
      //             date: '2022-02-12T10:00:00',
      //             subscribe: 1,
      //             appid: '87323417-a80f-40d2-8f7b-c10c17e40f0b',
      //             appSecret: '000618d5b5c74a1992a6a907bc30c41a',
      //             fallbackUrl: '',
      //             logo: 'https://fontdo-rcs.oss-cn-shenzhen.aliyuncs.com/images/0d57939e842244f9b569689846bbf85a.jpg',
      //             area: '北京海淀',
      //             whiteList: '15811206176\n13677765678',
      //             desc: '独一无二的室内装扮和精心打造的消除玩法，主人公艾乐瑞的飞屋意外遭到了冰龙弗洛斯的袭击，屋内陈设全都七零八落，艾乐瑞需要你的帮助，重建飞屋！ ',
      //             menuList: [
      //               {
      //                 id: 1,
      //                 name: '召唤客服',
      //                 type: 1,
      //                 content: '回复消息',
      //                 phone: '',
      //                 link: '',
      //                 browser: '2',
      //                 height: '1',
      //                 menuList: [],
      //               },
      //               {
      //                 id: 2,
      //                 name: '客服电话',
      //                 type: 2,
      //                 content: '',
      //                 phone: '3498530850',
      //                 link: '',
      //                 browser: '2',
      //                 height: '1',
      //                 menuList: [],
      //               },
      //             ],
      //           },
      //           {
      //             id: 2,
      //             name: '旅游行业模板',
      //             channel: '模拟器',
      //             status: 2,
      //             statusText: '更新-处理中',
      //             date: '2022-02-12T13:00:00',
      //             subscribe: 0,
      //             appid: '11111-111111-23b',
      //             appSecret: '2394782908432askldjfkadlsf',
      //             fallbackUrl: 'http://www.baidu.com',
      //             logo: 'https://fontdo-rcs.oss-cn-shenzhen.aliyuncs.com/images/26392933ef574506ac5dbb339c957554.png',
      //             area: '北京海淀',
      //             whiteList: '15811206176\n13677765678',
      //             desc: '交通行业模板aaa ',
      //             menuList: [
      //               {
      //                 id: 1,
      //                 name: '个人中心',
      //                 type: 1,
      //                 content: 'asdlfkjsadlf',
      //                 phone: '',
      //                 link: '',
      //                 browser: '2',
      //                 height: '1',
      //                 menuList: [
      //                   {
      //                     id: 11,
      //                     name: '登录',
      //                     type: 3,
      //                     content: '',
      //                     phone: '',
      //                     link: 'http://qq.com',
      //                     browser: '2',
      //                     height: '1',
      //                   },
      //                   {
      //                     id: 12,
      //                     name: '视频通话',
      //                     type: 2,
      //                     content: '',
      //                     phone: '45658756856',
      //                     link: '',
      //                     browser: '2',
      //                     height: '1',
      //                   },
      //                 ],
      //               },
      //             ],
      //           },
      //         ],
      //         total: 100,
      //       },
      //     })
      //   }, 500)
      // })
      if (+code === 1) {
        return {
          data: data.list,
          total: +data.total,
        }
      }

      return {
        data: [],
        total: 0,
      }
    },
    handleSelectionChange(arr) {
      this.selectedArr = arr
    },
    refresh() {
      // console.log(this.$refs.pageBox)
      this.$refs.pageBox.refresh()
    },
    async handleDelete(items) {
      this.$confirm(
        '选定的条目及条目相关的数据将被删除且不可恢复，您是否确定删除？',
        '删除',
        {
          iconClass: 'el-icon-warning-outline warning',
          center: true,
          closeOnClickModal: false,
        }
      ).then(async () => {
        const arr = Array.isArray(items) ? items : this.selectedArr
        const { code, msg } = await DeleteItem({
          app_id: arr.map(item => item.app_id).join(','),
        })
        if (+code === 1) {
          this.$message.success(msg)
          this.refresh()
        } else {
          this.$message.error(msg)
        }
      })
    },
    handleClickDeveloper(item) {
      this.selectedApp = item
      this.showDeveloper = true
    },
    handleShowAddEdit(item) {
      this.selectedApp = item || {}
      this.isAddEdit = true
      this.showAddEdit = true
    },
  },
}
</script>
<style lang="scss" scoped></style>
